<script>
import { get_image_list } from "@/apis/image.js";
import { login } from "@/apis/user.js";
export default {
    data() {
        return {
            formData: {
                utell: "",
                upwd: "",
            },
            userInfo: {},
            banners: [],
            isLogin: false
        }
    },
    onLoad(option) {
        get_image_list(res => {
            this.banners = res.data;
        }, () => { });
    },
    onShow(option) {
        uni.getStorage("userInfo")
            .then(res => {
                this.isLogin = true;
            })
            .catch(err => console.log(err))
    },
    methods: {
        login() {
            login(this.formData).then(res => {
                this.userInfo = res.data;
                console.log(res.data)
                uni.showToast({
                    title: "Login Successfully.",
                    icon: "none"
                });
                uni.setStorage({
                    key: "userInfo",
                    data: res.data
                });
                uni.setStorage({
                    key: "token",
                    data: res.data.token
                });
                setTimeout(() => {
                    uni.switchTab({
                        url: "/pages/index/index"
                    })
                }, 3000);
            })
        },
        logout() {
            uni.clearStorage();
            uni.showToast({
                title: "Logout Successfully...",
                icon: "none"
            });
            uni.navigateTo({
                url: "/pages/index/index"
            });
        },
        toRegister() {
            uni.navigateTo({
                url: "/pages/register/index"
            })
        }
    }
}
</script>

<template>
    <view class="content">
        <custom-swiper :image-list="banners"></custom-swiper>
        <label>Username: </label>
        <input type="text" class="username-input" placeholder="Type your username, please." v-model="formData.utell" />
        <label>Password: </label>
        <input type="password" class="password-input" placeholder="Password here." v-model="formData.upwd" />
        <view class="login-register-btn-wapper">
            <button class="login" @click="login">Login</button>
            <button class="goto-register" @click="toRegister">Register</button>
        </view>
    </view>
</template>

<style scoped>
.content {
    padding: 20rpx;
}

input {
    height: 80rpx;
    border: 1px solid #ccc;
    padding: 0 20rpx;
}

input,
button {
    border-radius: 20rpx;
    margin-bottom: 30rpx;
}

.login-register-btn-wapper {
    height: 50rpx;
}

.login-register-btn-wapper .login {
    background-color: #409eff;
    color: #fff;
    display: inline-block;
    width: 70%;
    margin-right: 20rpx;
    font-size: 18px;
}

.login-register-btn-wapper .goto-register {
    display: inline-block;
    width: calc(30% - 20rpx);
}
</style>
